import { defineConfig } from 'vite'
import * as path from 'node:path'
import vue from '@vitejs/plugin-vue'
import UnoCSS from 'unocss/vite'
import AutoImport from 'unplugin-auto-import/vite'
import { VantResolver } from '@vant/auto-import-resolver'
import Components from 'unplugin-vue-components/vite'
import { VueRouterAutoImports } from 'unplugin-vue-router'
import VueRouter from 'unplugin-vue-router/vite'
import mobileForever from 'postcss-mobile-forever'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
      VueRouter({
        extensions: ['.vue'],
        routesFolder: 'src/pages',
        dts: 'src/types/typed-router.d.ts',
      }),
      vue(),
      Components({
        extensions: ['vue'],
        resolvers: [VantResolver()],
        include: [/\.vue$/, /\.vue\?vue/],
        dts: 'src/types/components.d.ts',
      }),
      AutoImport({
        include: [
          /\.[tj]sx?$/,
          /\.vue$/,
          /\.vue\?vue/,
        ],
        imports: [
          'vue',
          VueRouterAutoImports,
          {
            'vue-router/auto': ['useLink'],
          }
        ],
        dts: 'src/types/auto-imports.d.ts',
        resolvers: [VantResolver()],
      }),
      UnoCSS(),
  ],
  resolve: {
    alias: {
      '@': path.join(__dirname, './src'),
      '~root': path.join(__dirname, '.'),
    },
  },
  server: {
    host: true,
    proxy: {
      '/api': {
        target: '',
        ws: false,
        changeOrigin: true,
      },
    },
  },
  css: {
    postcss: {
      plugins: [
        mobileForever({
          appSelector: '#app',
          viewportWidth: 375,
          maxDisplayWidth: 600,
          rootContainingBlockSelectorList: [
            'van-tabbar',
            'van-popup',
          ],
          border: true,
        }),
      ],
    },
  },
})
